<template>
  <div class="container">
    <div class="header">月度不良</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script>
  import commomOption from './commomOption.js';
  import { renderItem } from './blockBarInit.js';
  import * as echarts from 'echarts';

  export default {
    props: {
      data: {
        default: () => {
          return {
            xMonthTicket: [],
            lineData: [[]],
          };
        },
        typeof: Object,
      },
    },
    data() {
      return {
        myChart: null,
      };
    },

    watch: {
      data: {
        handler() {
          const series = [
            {
              // name: this.data.lineData[0][0],
              renderItem: (params, api) => renderItem(params, api, 0),
              data: ['2012', '2013', '2014', '2015', '2016'],
              yAxisIndex: 0,
              type: 'custom',
              barWidth: 15,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#3CAAB7' },
                    { offset: 1, color: 'rgba(19,37,67,0.08)' },
                  ]),
                },
              },
              label: {
                normal: {
                  // 重写未完成label，通过计算属性重新给formatter赋值，返回
                  show: true, // 计算的总数
                  position: 'top',
                  textStyle: { color: '#3EFFE8' },
                },
              },
            },
            // {
            //   // name: this.data.lineData[1][0],
            //   data: this.data.lineData[1].slice(1),
            //   yAxisIndex: 1,
            //   type: 'line',
            //   smooth: true,
            //   itemStyle: {
            //     color: 'rgb(255,228,93)',
            //     borderColor: 'rgba(32, 255, 231, 1)',
            //     borderWidth: 2,
            //   },
            //   label: {
            //     normal: {       // 重写未完成label，通过计算属性重新给formatter赋值，返回
            //       show: true,   // 计算的总数
            //       position: 'top',
            //       formatter:'{c}%',
            //       textStyle: { color: '#3EFFE8' }
            //     }
            //   },
            //   lineStyle: {
            //     width: 1,
            //   }
            // },
          ];

          const option = {
            tooltip: {
              trigger: 'axis',
            },
            grid: commomOption.grid,
            legend: commomOption.legend,
            xAxis: Object.assign({}, commomOption.xAxis, {
              data: this.data.xMonthTicket,
              axisLabel: {
                interval: 0, // 显示所有刻度
              },
            }),
            // yAxis: commomOption.yAxis,
            // yAxis2: {
            //   type: 'value',
            //   name: 'Y 轴 2'
            // },
            yAxis: [
              {
                //name: 'GB/日',
                type: 'value',
                max: 1000,
                ...commomOption.yAxis,
              },
              {
                type: 'value',
                min: 0,
                max: 2,
                axisLabel: {
                  show: true,
                  interval: 'auto',
                  color: 'rgb(255, 255, 255)',
                  formatter: '{value}%',
                },
              },
            ],
            series: series,
          };
          this.echartInit(option);
        },
        immediate: true,
      },
    },
    methods: {
      // echarts初始化
      echartInit(option) {
        if (this.myChart) {
          this.myChart.setOption(option);
          return false;
        }

        this.$nextTick(() => {
          this.myChart = echarts.init(this.$refs.echartsBox);

          option && this.myChart.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener('resize', () => {
            this.myChart.resize();
          });
        });
      },
    },
  };
</script>
<style lang="scss" src="./container.scss" scoped></style>
